<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
	<title>OA</title>
	 <jsp:include page="../media.jsp"></jsp:include>
	 <link type="text/css" rel="stylesheet" href="media/js/plugins/layer/laydate/need/laydate.css">
	 <link type="text/css" rel="stylesheet" href="media/js/plugins/layer/laydate/skins/default/laydate.css" id="LayDateSkin">
</head>
<body class="top-navigation">
    <div id="wrapper">
        <div id="page-wrapper" class="gray-bg">
			<!--顶部-->
			<jsp:include page="../top.jsp"></jsp:include>
           
            <div class="wrapper wrapper-content">
				<div class="row">
	                <div class="col-lg-12">
						<div class="ibox">
							<div class="ibox-title">
	                        	<h5>出库统计</h5>
	                    	</div>
							<div class="ibox-content">
								<div class="row">
									<div class="col-sm-2 m-b-xs">
										 <select class="input-sm form-control input-s-sm inline">
	                                            <option value="0">请选择电压等级</option>
	                                            <option value="1">全部</option>
	                                            <option value="2">110</option>
	                                            <option value="3">220</option>
												<option value="3">330</option>
												<option value="4">500</option>
												<option value="4">1000</option>
	                                    </select>
									</div>
									<div class="col-sm-10 m-b-xs" style="padding:0">
	                                    <div class="form-group" style="margin-right: 10px; float: left;">
	                                        <!--<div class="col-sm-10">-->
	                                            <input class="form-control layer-date" placeholder="开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
	                                        <!--</div>-->
	                                    </div>
	                                    <div class="form-group" style="float: left;">
	                                        <!--<div class="col-sm-10">-->
	                                            <input class="form-control layer-date" placeholder="结束时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
	                                        <!--</div>-->
	                                    </div>
	                                    <button class="btn btn-primary" type="submit">查询</button>
									</div>
								</div>		
								<div class="project-list" id="container" style="min-width:700px;height:400px; margin: 0 auto;"></div>
	                    	</div>
	                	</div>
	            	</div>
	        	</div>
			</div>
        </div>
    </div>
 	<script src="media/js/plugins/layer/laydate/laydate.js"></script>
 	<script type="text/javascript" src="media/js/jquery-1.8.3.min.js"></script>
  	<script type="text/javascript" src="media/js/highcharts.js"></script>
  	<!--<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>-->
    <script>
		$(function () {
		    
		    var colors = Highcharts.getOptions().colors,
        		categories = ['2015-9-23', '2015-9-24', '2015-9-25', '2015-9-26', '2015-9-27'],
		        name = '出库数量统计',
		        data = [{
		                y: 1,
		                color: colors[0],
		                drilldown: {
		                    name: '出库',
		                    categories: ['升高座箱'],
		                    data: [1],
		                    color: colors[0]
		                }
		            }, {
		                y: 6,
		                color: colors[1],
		                drilldown: {
		                    name: '出库',
		                    categories: ['升高座箱', '油枕', '片散'],
		                    data: [1, 1, 4],
		                    color: colors[1]
		                }
		            }, {
		                y: 3,
		                color: colors[2],
		                drilldown: {
		                    name: '出库',
		                    categories: ['升高座箱', '油枕', '升高座箱'],
		                    data: [1, 1, 1],
		                    color: colors[2]
		                }
		            }, {
		                y: 2,
		                color: colors[3],
		                drilldown: {
		                    name: '出库',
		                    categories: ['升高座箱', '油枕'],
		                    data: [1, 1],
		                    color: colors[3]
		                }
		            }, {
		                y: 2,
		                color: colors[4],
		                drilldown: {
		                    name: '出库',
		                    categories: ['升高座箱', '油枕'],
		                    data: [1, 1],
		                    color: colors[4]
		                }
		            }];
		
		    function setChart(name, categories, data, color) {
			chart.xAxis[0].setCategories(categories, false);
			chart.series[0].remove(false);
			chart.addSeries({
				name: name,
				data: data,
				color: color || 'white'
			}, false);
			chart.redraw();
		    }
		
		    var chart = $('#container').highcharts({
		        chart: {
		            type: 'column'
		        },
		        title: {
		            text: '出库数量统计'
		        },
		        subtitle: {
		            text: ''
		        },
		        xAxis: {
		            categories: categories
		        },
		        yAxis: {
		            title: {
		                text: '出库数量（箱 / 件）'
		            }
		        },
		        plotOptions: {
		            column: {
		                cursor: 'pointer',
		                point: {
		                    events: {
		                        click: function() {
		                          return false    //禁止点击
		                        }
		                    }
		                },
		                dataLabels: {
		                    enabled: true,
		                    color: colors[0],
		                    style: {
		                        fontWeight: 'bold'
		                    },
		                    formatter: function() {
		                        return this.y;
		                    }
		                }
		            }
		        },
		        tooltip: {
		            formatter: function() {
		                var point = this.point,
		                    s = '<b>'+ this.y +'台</b><br/>';
		//              if (point.drilldown) {
		//                  s += 'Click to view '+ point.category +' versions';
		//              } else {
		//                  s += 'Click to return to browser brands';
		//              }
		                return s;
		            }
		        },
		        legend:{
		        	enabled: false   //图表下面的文本
		        },
		        series: [{
		            name: name,
		            data: data,
		            color: 'white'
		        }],
		        credits: {
		            	text: ''
		        },
		        exporting: {
		            enabled: false
		        }
		    })
		    .highcharts(); // return chart
		});							
//      //外部js调用
//      laydate({
//          elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
//          event: 'focus' //响应事件。如果没有传入event，则按照默认的click
//      });
//
//       //日期范围限制
//      var start = {
//          elem: '#start',
//          format: 'YYYY/MM/DD hh:mm:ss',
//          min: laydate.now(), //设定最小日期为当前日期
//          max: '2099-06-16 23:59:59', //最大日期
//          istime: true,
//          istoday: false,
//          choose: function (datas) {
//              end.min = datas; //开始日选好后，重置结束日的最小日期
//              end.start = datas //将结束日的初始值设定为开始日
//          }
//      };
//      var end = {
//          elem: '#end',
//          format: 'YYYY/MM/DD hh:mm:ss',
//          min: laydate.now(),
//          max: '2099-06-16 23:59:59',
//          istime: true,
//          istoday: false,
//          choose: function (datas) {
//              start.max = datas; //结束日选好后，重置开始日的最大日期
//          }
//      };
//      laydate(start);
//      laydate(end);
    </script>
    </body>
</html>
